﻿@page "/gallery/datagrid"
@using MyApp.Client.Pages.gallery.DataGrid

<div class="example">

<Breadcrumbs>
    <Breadcrumb href="/gallery">
        gallery
    </Breadcrumb>
    <Breadcrumb>
        DataGrid Examples
    </Breadcrumb>
</Breadcrumbs>

<ApiReference Component="DataGrid<Model>">
    Default
</ApiReference>

<p class="mb-4 text-lg">
    In its most simple usage the DataGrid component can be used to render typed collections:
</p>

<ExampleCode Path="/gallery/DataGrid/Default.razor" />

<p class="mb-4 text-lg">
    Which by default will display all public serializable properties:
</p>

<Default />

<h2 class="mt-8 mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">
    Simple Customizations
</h2>

<p class="mb-4 text-lg">
    Which columns are displayed and how they're formatted is customizable using <code>&lt;Column&gt;</code> definitions:
</p>

<ExampleCode Path="/gallery/DataGrid/Custom.razor" />

<Custom />

<h2 class="mt-8 mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">
    Responsive
</h2>

<p class="mb-4 text-lg">
    A more advanced example showing how to implement a responsive datagrid defining what columns and Headers
    are visible at different responsive breakpoints and using <code>&lt;Template&gt;</code> to render a custom cell:
</p>

<ExampleCode Path="/gallery/DataGrid/Responsive.razor" />

<Responsive />

<h2 id="table-styles" class="mt-8 mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">
    Table Styles
</h2>

<p class="mb-4 text-lg">
    Behavior of the DataGrid can be customized with the <code>HeaderSelected</code> event to handle when column headers are selected to apply custom filtering
    to the <code>Items</code> data source whilst the <code>RowSelected</code> event can be used to apply custom behavior when a row is selected.
</p>

<ExampleCode Path="/gallery/DataGrid/TableStyles.razor" />

<p class="mb-4 text-lg">
    The appearance of DataGrids can use <code>TableStyles</code> to change to different
    <TextLink href="https://tailwindui.com/components/application-ui/lists/tables">Tailwind Table Styles</TextLink>
    with the <code>TableStyle</code> Enum Flags, e.g:
</p>

<TableStyles />

</div>
